﻿<template>
	<transition name="el-zoom-in-center">
		<div class="SHZY-preview-main">
			<div class="SHZY-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : '编辑'" />
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<div :style="{ margin: '0 auto', width: '100%' }">
				<el-row :gutter="15" class=" main">
					<el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right"
						:rules="rules">

						<el-form-item label="报检类型" prop="type">
							<el-select v-model='dataForm.type' placeholder='请选择' clearable :style='{ "width": "100%" }'>
								<el-option v-for="(item, index) in ipqcInspectionTypeData" :key="index"
									:label="item.fullName" :value="item.enCode"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="工厂信息" prop="factoryId">
							<SHZY-TreeSelect v-model="dataForm.factoryId" :key="factoryIndex" :defaultExpandAll="false"
								:options="treeData" placeholder="选择工厂信息" :disabled="false" @change="handleFactory" />
						</el-form-item>

						<el-form-item label="物料" prop="materialCode">
							<SHZY-select :list="materialOptions" v-model:bindValue="dataForm.materialCode" label="name"
								value="code" placeholder="请选择物料" isConcat concatSymbol=" / " @change="handleMaterialChange">
							</SHZY-select>
						</el-form-item>

						<el-form-item label="⼯序" prop="processIdList">
							<SHZY-TreeSelect v-model="dataForm.processResult" :options="processData" lastLevel multiple
								placeholder="选择⼯序信息" :disabled="false" @change="handleProcess" />
						</el-form-item>

						<el-form-item label="检验⽅案" prop="inspectionCase">
							<SHZY-select :list="cardData" v-model:bindValue="dataForm.inspectionCase" label="name"
								value="id" placeholder="请选择检验⽅案">
							</SHZY-select>
						</el-form-item>

						<el-form-item label="⽣产订单号" prop="orderNo">
							<el-input v-model='dataForm.orderNo' placeholder='请输入' clearable :style='{ "width": "100%" }'>
							</el-input>
						</el-form-item>

						<el-form-item label="⽣产数量" prop="productionQty">
							<el-input v-model.number='dataForm.productionQty' placeholder='请输入' clearable
								:style='{ "width": "100%" }'>
							</el-input>
						</el-form-item>

						<el-form-item label="检验员" prop="employeeCode">
							<user-select v-model="dataForm.employeeCode" placeholder="检验员" @change="onChange" />
						</el-form-item>

						<el-form-item label="报检日期" prop="date">
							<el-date-picker v-model='dataForm.date' placeholder='请选择'
								:disabled="dataForm.dayFlag == 'Y' || dataForm.hourFlag == 'Y'" clearable
								:style='{ "width": "100%" }' type='datetime' format='yyyy-MM-dd HH:mm:ss'
								value-format='timestamp'>
							</el-date-picker>
						</el-form-item>

						<el-form-item label="按天生成" prop="dayFlag">
							<el-radio-group v-model='dataForm.dayFlag' size='small' @change="dataForm.dayValue = 0"
								:disabled="dataForm.hourFlag == 'Y'">
								<el-radio-button v-for="(item, index) in options1" :key="index" :label="item.id">{{
									item.fullName }}</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="天" prop="dayValue">
							<el-input v-model.number='dataForm.dayValue' placeholder='请输入'
								:disabled="dataForm.dayFlag == 'N'" clearable :style='{ "width": "100%" }'>
							</el-input>
						</el-form-item>

						<el-form-item label="按小时生成" prop="hourFlag">
							<el-radio-group v-model='dataForm.hourFlag' size='small' @change="dataForm.hourValue = 0"
								:disabled="dataForm.dayFlag == 'Y'">
								<el-radio-button v-for="(item, index) in options1" :key="index" :label="item.id">{{
									item.fullName }}</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="小时" prop="hourValue">
							<el-input v-model.number='dataForm.hourValue' placeholder='请输入'
								:disabled="dataForm.hourFlag == 'N'" clearable :style='{ "width": "100%" }'>
							</el-input>
						</el-form-item>

						<el-form-item label="⾃动关闭" prop="closeFlag">
							<el-radio-group v-model='dataForm.closeFlag' size='small'>
								<el-radio-button v-for="(item, index) in options1" :key="index" :label="item.id">{{
									item.fullName }}</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="备注" prop="remark">
							<el-input v-model='dataForm.remark' placeholder='请输入备注' show-word-limit
								:style='{ "width": "100%" }' type='textarea' :autosize='{ "minRows": 4, "maxRows": 4 }'
								maxlength='2000'>
							</el-input>
						</el-form-item>

					</el-form>
				</el-row>
			</div>
		</div>
	</transition>
</template>
<script>
import { getIpqcInspectionInfo, createIpqcInspection, updateIpqcInspection, getArtrouteSelector } from '@/api/q1/business/ipqcInspection'
import factorystructureAPI from "@/api/q1/basedata/factorystructure";
import { getMaterialAll } from '@/api/q1/basedata/material';
import { getCheckcardAll } from '@/api/q1/basedata/inspectionsCardList'
export default {
	components: {},
	props: [],
	data() {
		const materialCodeValidator = (rule, value, callback) => {
			if (value.trim().length == 0 && this.dataForm.inspectionCase.trim().length == 0) {
				callback(new Error("请选择物料或者检验方案"));
			} else {
				callback();
			}
		};
		const inspectionCaseValidator = (rule, value, callback) => {
			if (this.dataForm.materialCode.trim().length == 0 && value.trim().length == 0) {
				callback(new Error("请选择检验方案或者物料"));
			} else {
				callback();
			}
		};
		const dateValidator = (rule, value, callback) => {
			if (!value || (value.length == 0 && this.dataForm.dayFlag == "N" && this.dataForm.hourFlag == "N")) {
				callback(new Error("请选择报检日期"));
			} else {
				callback();
			}
		};
		const dayValueValidator = (rule, value, callback) => {
			if (value == "" && this.dataForm.dayFlag == "Y") {
				callback(new Error("请输入天"));
			} else {
				var _reg = /^\d+$/
				if (!_reg.test(value)) {
					callback(new Error("请输入正确的数字"));
				} else {
					callback();
				}
			}
		};
		const hourValueValidator = (rule, value, callback) => {
			if (value == "" && this.dataForm.hourFlag == "Y") {
				callback(new Error("请输入小时"));
			} else {
				var _reg = /^\d+$/
				if (!_reg.test(value)) {
					callback(new Error("请输入正确的数字"));
				} else {
					callback();
				}
			}
		};
		return {
			btnLoading: false,
			loading: false,
			visible: false,
			ipqcInspectionTypeData: [],
			treeData: [],
			materialOptions: [],
			processData: [],
			processResult: '',
			cardData: [],
			factoryIndex: 1,
			dataForm: {
				id: '',
				code: '',
				date: '',
				type: '',
				factoryId: '',
				workshopId: '',
				teamId: '',
				workshopSectionId: '',
				stationId: '',
				materialCode: '',
				processIdList: '',
				inspectionCase: '',
				productionQty: 0,
				employeeCode: '',
				employeeName: '',
				orderNo: '',
				remark: '',
				status: 0,
				overdue: 0,
				closeFlag: "N",
				dayFlag: "N",
				dayValue: 0,
				hourFlag: "N",
				hourValue: 0
			},
			rules: {
				type: [{ required: true, message: '请选择报检类型', trigger: '"blur"' },],
				// factoryId: [{ required: true, message: '请选择工厂信息', trigger: '"blur"' },],
				materialCode: [{ required: true, validator: materialCodeValidator, trigger: '"blur"' }],
				inspectionCase: [{ required: true, validator: inspectionCaseValidator, trigger: '"blur"' }],
				orderNo: [{ required: true, message: '请输入⽣产订单号', trigger: '"blur"' },],
				productionQty: [
					{ required: true, message: '请输入⽣产数量', trigger: '"blur"' },
					{ pattern: /^\d+$/, message: '请输入正确的数字', trigger: '"blur"' },
				],
				date: [{ required: true, validator: dateValidator, trigger: '"blur"' }],
				dayValue: [
					{ required: true, validator: dayValueValidator, trigger: '"blur"' },
				],
				hourValue: [
					{ required: true, validator: hourValueValidator, trigger: '"blur"' },
				],
			},
			typeOptions: [{ 'fullName': "选项一", 'id': "1" }, { 'fullName': "选项二", 'id': "2" }],
			options1: [{ 'fullName': "关闭", 'id': "N" }, { 'fullName': "开启", 'id': "Y" }],
		}
	},
	computed: {},
	watch: {},
	created() {
		this.getDictionaryData()
	},
	mounted() {
	},
	methods: {
		goBack() {
			this.$emit('refresh')
		},
		init(id) {
			this.dataForm.id = id || 0;
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['elForm'].resetFields();
				factorystructureAPI.getDictionaryTypeSelector(0).then(res => {

					this.treeData = res.data.list
				})
				getMaterialAll().then(res => {
					this.materialOptions = res.data.list;
				});
				getCheckcardAll().then(res => {
					this.cardData = res.data.list;
				});
				if (this.dataForm.id) {
					getIpqcInspectionInfo(this.dataForm.id).then(res => {
						this.dataForm = res.data;
						
						if (this.dataForm.stationId != "") {
							this.dataForm.factoryId = this.dataForm.stationId
						} else if (this.dataForm.workshopSectionId != "") {
							this.dataForm.factoryId = this.dataForm.workshopSectionId
						} else if (this.dataForm.teamId != "") {
							this.dataForm.factoryId = this.dataForm.teamId
						} else {
							this.dataForm.factoryId = this.dataForm.workshopId
						}
						this.handleMaterialChange(this.dataForm.materialCode)
						this.dataForm.processResult = this.dataForm.processIdList.split(",")
					})
				}
			});
		},
		getDictionaryData() {
			this.$store.dispatch('base/getDictionaryData', { sort: 'ipqcInspectionType' }).then((res) => {
				this.ipqcInspectionTypeData = res
			})
		},
		getFactoryInfo(parentId, data) {
			data.some(element => {
				if (element.id == parentId) {
					if (element.type == "Workshop") {
						this.dataForm.workshopId = element.id
					} else if (element.type == "Team") {
						this.dataForm.teamId = element.id
					} else if (element.type == "Section") {
						this.dataForm.workshopSectionId = element.id
					} else if (element.type == "Station") {
						this.dataForm.stationId = element.id
					}
					if (element.parentId != "") {
						this.getFactoryInfo(element.parentId, this.treeData)
					} else {
						return true
					}
				} else {
					if (element.hasChildren) {
						this.getFactoryInfo(parentId, element.children)
					}
				}
			})
		},
		handleFactory(val1, val2) {
			this.dataForm.factoryId = val1
			this.factoryIndex++
			this.dataForm.workshopId = ""
			this.dataForm.teamId = ""
			this.dataForm.workshopSectionId = ""
			this.dataForm.stationId = ""
			if (!val2) {
				return
			}
			//Workshop, Team, Section
			if (val2.type == "Workshop") {
				this.dataForm.workshopId = val2.id
			} else if (val2.type == "Team") {
				this.dataForm.teamId = val2.id
			} else if (val2.type == "Section") {
				this.dataForm.workshopSectionId = val2.id

			} else if (val2.type == "Station") {
				this.dataForm.stationId = val2.id
			}
			if (val2.parentId != "")
				this.getFactoryInfo(val2.parentId, this.treeData)
		},
		handleMaterialChange(val) {
			getArtrouteSelector(val).then(res => {
				this.processData = res.data.list
			})
		},
		handleProcess(val) {
			this.dataForm.processIdList = val.join(',')
		},
		onChange(val1, val2) {
			if (!val2) return this.dataForm.employeeName = ''
			this.dataForm.employeeName = val2.fullName
		},
		dataFormSubmit() {
			this.$refs['elForm'].validate((valid) => {
				if (valid) {
					this.btnLoading = true;
					const formMethod = !this.dataForm.id ? createIpqcInspection : updateIpqcInspection;

					formMethod(this.dataForm).then((res) => {
						this.btnLoading = false;
						this.$message({
							message: res.msg,
							type: 'success',
							duration: 1000,
							onClose: () => {
								this.visible = false,
									this.$emit('refresh', true)
							}
						})
					}).catch((res) => {
						this.btnLoading = false;
					})
				}
			})
		},
	}
}
</script>
